<!DOCTYPE html>
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>存根2023年</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .w100 {
            width: 100%;
        }
        .flex {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }
        .wrap {
            flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            -webkit-box-lines: multiple;
            -moz-flex-wrap: wrap;
        }
        .justify-center {
            -webkit-box-pack: center;
            -moz-justify-content: center;
            -webkit-justify-content: center;
            justify-content: center;
        }
        .justify-between {
            -webkit-box-pack: space-between;
            -moz-justify-content: space-between;
            -webkit-justify-content: space-between;
            justify-content: space-between;
        }
        .mr20 {
            margin-right: 20px;
        }
        .mt20 {
            margin-top: 20px;
        }
        .mb20 {
            margin-bottom: 20px;
        }
        .ml20 {
            margin-left: 20px;
        }
        .clearfix::after,
        .clearfix::before {
            content: '';
            display: table;
            clear: both;
        }
        .title,
        .info {
            font-size: 28px;
            font-weight: 600;
        }

        .ul {
            margin:0 auto;
        }

        .li {
            width: 49%;
            height: 180px;
            border-bottom: 2px solid #000;
            text-align:left;
        }
        .li:first-child,
        .li:nth-child(2) {
            border-top: 2px solid #000;
        }
        .li:nth-child(odd) {
            border-right: 2px solid #000;
        }
        .li .left {
            padding-left: 4px;
            text-align:left;
        }
        .li .left .item {
            margin-bottom: 2px;
            font-size: 15px;
        }
        .li .left .item span {
            font-weight: 600;
        }
        .li .right {
            width: 128px;
            height: 168px;
            padding-right: 4px;
            padding-top:4px;
            float:right;

        }
        .li .right img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: fill;
        }
        .content2 {
            page-break-before: always;
        }
        .box-inline {
            display: inline-block;
        }


    </style>

</head>

<body >

    <div class="container clearfix"  th:each ='candidateList,status:${candidateLists}'>
        <div class="title flex justify-center mt20 mb20" ><span th:text='${taskName}'></span></div>
        <div class="info flex justify-center mb20">
            <div class='mr20'>考点名称：<span  th:text='${placeName}'></span></div>
            <div>考场：<span th:text='${roomName}'></span></div>
        </div>
        <div class="ul w100">
            <div class="li box-inline" th:each='candidate:${candidateList}'>
                <div class="left box-inline" >
                    <div class="item seat"  th:if="${candidate.seatLabel} != null"><span th:text='${candidate.seatLabel}'></span>：<span  th:text='${candidate.seat}'></span></div>
                    <div class="item name" th:if="${candidate.nameLabel} != null"><span th:text='${candidate.nameLabel}'></span>：<span  th:text='${candidate.name}'></span></div>
                    <div class="item sex" th:if="${candidate.sexLabel} != null"><span th:text='${candidate.sexLabel}'></span>：<span  th:text='${candidate.sex}'></span></div>
                    <div class="item id" th:if="${candidate.idcardLabel} != null"><span th:text='${candidate.idcardLabel}'></span>：<span  th:text='${candidate.idcard}'></span></div>
                    <div class="item admission" th:if="${candidate.admissionLabel} != null"><span th:text='${candidate.admissionLabel}'></span>：<span  th:text='${candidate.admission}'></span></div>
                    <div class="item subject" th:if="${candidate.subjectLabel} != null"><span th:text='${candidate.subjectLabel}'></span>：<span  th:text='${candidate.subject}'></span></div>
                    <div class="item sign" th:if="${candidate.signLabel} != null"><span th:text='${candidate.signLabel}'></span>：<span></span></div>
                </div>
                <div class="right box-inline" th:if="${candidate.photoLabel} != null"><img th:if="${candidate.photo} == null or ${candidate.photo} == '' "
                        src="https://obs-ogt.obs.cn-east-3.myhuaweicloud.com:443/tinymce/1675325390599-blobid0.png"    />
                    <img th:if ="${candidate.photo} != null and ${candidate.photo} != ''"
                         th:src="${candidate.photo}"    />
                </div>
            </div>

        </div>
        <div class="content2"></div>
    </div>


</body>

</html>